import { Modal, Table, Tag, message } from "antd"
import {
  CheckCircleOutlined,
  SyncOutlined,
  CloseCircleOutlined
} from '@ant-design/icons'
import { useEffect, useState } from "react"
import { getProcessById } from "@/apis/process"
import { paginationConfig } from "@/utils"

const SolutionModal = ({ isSolutionOpen, handleCancel, id }) => {
  const colunms = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 50,
    },
    {
      title: '车辆数量',
      dataIndex: 'num',
      key: 'num',
      align: 'center',
      ellipsis: true,
      width: 100,
      sorter: (a, b) => a.num - b.num,
      render: (record) => record
    },
    {
      title: '总旅行路程',
      dataIndex: 'dist',
      key: 'dist',
      align: 'center',
      ellipsis: true,
      width: 100,
      sorter: (a, b) => a.dist - b.dist,
      render: (record) => record
    },
    {
      title: '总旅行时间',
      dataIndex: 'time',
      key: 'time',
      align: 'center',
      ellipsis: true,
      width: 100,
      sorter: (a, b) => a.time - b.time,
      render: (record) => record
    },
    {
      title: '总等待时间',
      dataIndex: 'wait',
      key: 'wait',
      align: 'center',
      ellipsis: true,
      width: 100,
      sorter: (a, b) => a.wait - b.wait,
      render: (record) => record
    },
    {
      title: '总延误时间',
      dataIndex: 'delay',
      key: 'delay',
      align: 'center',
      ellipsis: true,
      width: 100,
      sorter: (a, b) => a.delay - b.delay,
      render: (record) => record
    },
  ]
  const [solutionData, setSolutionData] = useState([])
  const [txtContent, setTxtContent] = useState([])

  const processData = () => {
    if (txtContent) {
      return txtContent.map((row, rowIndex) => {
        return {
          key: rowIndex + 1,
          id: rowIndex + 1,
          num: row[0],
          dist: row[1],
          time: row[2],
          wait: row[3],
          delay: row[4]
        }
      })
    }
  }

  useEffect(() => {
    const getSolutionList = async () => {
      const res = await getProcessById(id, 0)
      setTxtContent(res.txt_content)
    }
    getSolutionList()

  }, [id])

  useEffect(() => {
    setSolutionData(processData())
  }, [txtContent])

  // 选择
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const rowSelection = {
    selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      setSelectedRowKeys(newSelectedRowKeys)
    },
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
    ]
  }

  const locales = { selectionAll: '全选所有', selectInvert: '反选当页', selectNone: '清空所有' }

  const handleOk = () => {
    const selectedRows = solutionData.filter(row =>
      selectedRowKeys.includes(row.key)
    )
    handleCancel(selectedRows)
  }

  return (
    <div>
      <Modal
        title="选择解决方案"
        open={isSolutionOpen}
        width={1000}
        onOk={handleOk}
        onCancel={() => handleCancel(null)}
        okText="确定"
        cancelText="取消"
      >
        <Table
          columns={colunms}
          dataSource={solutionData}
          bordered
          rowSelection={rowSelection}
          pagination={paginationConfig}
          scroll={{
            y: 'calc(100vh - 420px)',
            x: 'max-content',
          }}
          locale={locales}
        />

      </Modal>
    </div>
  )
}
export default SolutionModal